<script lang="ts" setup>
import { ref, watch } from 'vue'

const props = defineProps({
    list: Array
})

const menuList = ref() as any

watch(() => props.list, (newValue) => {
    menuList.value = newValue
})

const emit = defineEmits(["handleSelectPlat"])
const handleSelectPlat = (val:any) =>{
    emit("handleSelectPlat", val)
}

</script>

<template>
    <div class="ecologyBoxLeft bgfff">
        <div class="flex justify_between ecologyLeftBox pointer" v-for="item in menuList" :key="item.id" @click="handleSelectPlat(item.id)">
            <div class="ecologyLeftBoxName contentText">{{ item.name }}</div>
            <div class="ecologyLeftBoxNum contentText">{{ item.products_count }}</div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.ecologyBoxLeft {
    width: 28%;
    padding: 22px 18px;
    border-radius: 10px;

    .ecologyLeftBox {
        margin-bottom: 24px;
        padding: 0 10px;

        .ecologyLeftBoxName {
            color: #172E59;
            font-family: alibabapuhuitiRegular;
        }

        .ecologyLeftBoxNum {
            color: #A6A6A6;
            font-family: alibabapuhuitiRegular;
        }
    }
}

@media screen and (max-width: 450px){
    .ecologyBoxLeft{
        width: 100%;

        .ecologyLeftBox{
            padding: 0;
        }
    }
}
</style>